<template>
    <div class="overdueList">
        <v-header name="跟进反馈" :right="false"></v-header>
        <div class="line"></div>
        <div>
            <template>
                <div class="line"></div>
                <ul class="contractInfo">
                    <li>
                        <router-link tag="p" class="contract" :to="'/order/'+this.$route.params.contractNo+'/orderBasic'">
                        <span class="color1">合同编号</span> {{this.$route.params.contractNo}}
                        <img class="chevron-right" src="../../icon/next.png"/>
                        </router-link>
                    </li>
                    <li>
                        <div class="sleft">
                            <span class='key'>{{this.$store.state.overdue.overdueDetail.applicant_name}}</span>
                            <span class='value'>{{this.$store.state.overdue.overdueDetail.mobile}}</span>
                        </div>
                        <div class="sright">
                            <a class="radioBtn call" v-bind:href="'tel:'+this.$store.state.overdue.overdueDetail.mobile">拨打</a>
                        </div>
                    </li>
                    <li>
                        <div class="sleft">
                            <span class='key'>借款金额</span>
                            <span class='value'>{{this.$store.state.overdue.overdueDetail.ci_loan_money}}元</span>
                        </div>
                    </li>
                    <li>
                        <div class="sleft">
                            <span class='key'>已还期数</span>
                            <span class='value'>{{this.$store.state.overdue.overdueDetail.had_pay_periods}}期</span>
                        </div>
                        <div class="sright">
                            <span class='key'>总期数</span>
                            <span>{{this.$store.state.overdue.overdueDetail.periods}}期</span>
                        </div>
                    </li>
                    <li class="underline">
                        <div class="sleft">
                            <span class='key'>未还期数</span>
                            <span class='value red'>{{this.$store.state.overdue.overdueDetail.hadnot_pay_periods}}期</span>
                        </div>
                        <div class="sright">
                            <span class="key">逾期天数</span>
                            <span class="value red">{{this.$store.state.overdue.overdueDetail.overDueDays}}天</span>
                        </div>
                    </li>
                    <li class="undertext">
                        <div class="sleft">
                            <span class='value'>{{this.$store.state.overdue.overdueDetail.SNAME}} </span>
                        </div>
                        <div class="sright">
                            <span class='key'>日期</span>
                            <span class='value'>{{this.$store.state.overdue.overdueDetail.create_time}}</span>
                        </div>
                    </li>
                </ul>
            </template>          
        </div>
        <div class="line"></div>
        <div class="line"></div>
        <div class="overdue-follow">
            <form action="">
                <div class="top">
                    <label for="cate" class="left">跟进分类：</label>
                    <select name="cate" id="cate" class="right" v-model='overdueFollowInfoadd.cate'> 
                        <option value="请选择">请选择</option> 
                        <option value="表示近期会还款">表示近期会还款</option> 
                        <option value="表示已存款">表示已存款</option> 
                        <option value="待跟进">待跟进</option> 
                        <option value="涉嫌套现">涉嫌套现</option> 
                        <option value="无法联系">无法联系</option> 
                        <option value="无钱还款">无钱还款</option> 
                        <option value="无人接听">无人接听</option> 
                        <option value="新增">新增</option> 
                        <option value="已还款">已还款</option> 
                        <option value="正在筹钱中">正在筹钱中</option> 
                    </select> 
                </div>
                <div class="bottom">
                    <label for="description" class="left">跟进情况描述：</label>
                    <textarea name="description" id="description" rows="5" class="right" v-model='overdueFollowInfoadd.description'></textarea>
                </div>
                <div class="submit">
                    <mt-button type="primary" v-if="submitVisible" size="large" @click="submit">确定</mt-button>
                    <mt-button type="primary" v-if="!submitVisible" size="large" disabled>提交等待中</mt-button>
                </div>
                <span class="tips">备注：跟进信息保存以后将无法再次修改</span>
            </form>
        </div>
        <div class="line"></div>
        <div class="line"></div>
        <scroller class='contractList' v-if="!no_data" v-on:load="loadmore" v-on:refresh="refresh" ref="scroller">
            <div class="overdue-follow-info">
                <ul>
                    <li v-for="(item,index) in overdueFollowInfo" >
                        <div class="left">
                            <i class="icon-circle">{{index+1}}</i>
                            <i class="line"></i>
                        </div>
                        <div class="right">
                            <div class="type">
                                <span>[类型]</span>
                                <span :class='((item.cate=="表示近期会还款")||(item.cate=="表示已存款")||(item.cate=="待跟进")||(item.cate=="新增")||(item.cate=="已还款")||(item.cate.indexOf=="正在筹钱中"))?"blue":"red"'>{{item.cate}}</span>
                            </div>
                            <div class="description">
                                <p>情况说明：&nbsp;&nbsp;{{item.description}}</p>
                            </div>
                            <div class="follow-info">
                                <span class="FI-left">跟进人：&nbsp;{{item.follow_person}}</span>
                                <span class="FI-right">跟进日期：&nbsp;{{item.addtime}}</span>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </scroller>
    </div>
</template>
<script>
    import Config from '../../api/config'
    import {mapState} from "vuex"
    import scroller from "../scoller"
    import header from "../header"
    export default{
        data () {
            return {
                submitVisible:true,
                no_data: false
            }
        },
        components: {
            scroller,
            "v-header": header,
        },
        created(){
            this.refresh()
        },
        computed: {
            ...mapState({
                overdueDetail: state => state.overdue.overdueDetail,
                overdueFollowInfo: state => state.overdue.overdueFollowInfo,
                overdueFollowInfoadd: state => state.overdue.overdueFollowInfoadd,
            })
        },
        methods: {
            refresh(e){
                this.$store.commit({type: 'setDetailParams', params: {"detailParam$contractNo": this.$route.params.contractNo}})
                this.request()
                this.$store.commit({type: 'setOverdueFollowInfo', params: {"followInfoParam$contract_no": this.$route.params.contractNo}})
                this.requestOverdueFollowInfo()
            },
            loadmore(e){
                this.$store.commit({type: 'setOverdueFollowInfo', params: {"followInfoParam$contract_no": this.$route.params.contractNo,"followInfoParam$page": this.searchParm.page + 1}})
                this.requestOverdueFollowInfo(false,true)
            },
            request(showNodata = true, append = false){
                var self = this
                this.$store.dispatch({
                    type: 'overdueDetail',
                    append: append
                }).then(function (res) {
                    
                })
            },
            requestOverdueFollowInfo(showNodata = false, append = false){
                var self = this
                this.$store.dispatch({
                    type: 'overdueFollowInfo',
                    append: append
                }).then(function (res) {
                    if (!res.data.length) {
                        self.$refs.scroller.isNoData()
                    }
                    if (typeof(self.$refs.scroller) !== 'undefined') {
                        self.$refs.scroller.removeLoading()
                    }
                    self.no_data = !res.data.length && showNodata ? true : false
                })
            },
            submit(e,append = false, showNodata = false){
                if(e && e.preventDefault){e.preventDefault()}
                else{window.event.returnValue = false}
                if(this.overdueFollowInfoadd.cate && this.overdueFollowInfoadd.description){
                    this.submitVisible = !this.submitVisible
                    this.$store.commit({type: 'setOverdueFollowInfoAdd', params: {"overdueFollowInfoadd$contract_no": this.$store.state.overdue.overdueDetail.contract_no,"overdueFollowInfoadd$cate":this.overdueFollowInfoadd.cate,"overdueFollowInfoadd$description": this.overdueFollowInfoadd.description}})
                    this.requestOverdueFollowInfoAdd(true, false)
                }
            },
            requestOverdueFollowInfoAdd(append = false, showNodata = false){
                var self = this
                this.$store.dispatch({
                    type: 'overdueFollowInfoAdd',
                    append: append,
                }).then(function (res) {
                    self.submitVisible = !self.submitVisible
                    self.refresh()
                    self.$store.commit('resetOverdueFollowInforesetDetailParam')
                })
            }
        }
    }
</script>